<template>
  <div class='forumDiv'>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="标题" style="height:50px">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="交流内容" style="height: 90px">
        <el-input type="textarea" v-model="form.content"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          title: "",
          content: ""
        }
      };
    },
    methods: {
      onSubmit() {
        var params = new URLSearchParams();
        params.append('title', this.form.title);
        params.append('content', this.form.content);
        let _self = this;
        let url = "/topic";
        _self.$http.post(url, params)
          .then(function (response) {
            alert("成功");
          }).catch(function (error) {
          console.log(error);
        })
      }
    }
  };
</script>

<style scoped>
  .el-pagination .el-pager .active {

    background-color: #6bd5f1 !important;
  }

  .forumDiv {
    padding: 0;
    box-sizing: border-box;
    border: none;
    background-color: #ffffff;
    width: 60%;
    display: block;
    margin-left: 5%;
    margin-top: 3%;

  }

  .stuff > span {
    font-size: 14px;
  }

  .desc {
    font-size: 1rem;
    color: #a1a8b8;
  }

  .listLeftRecommend {
    background-color: #009a61;
    float: left;
    text-align: center;
    line-height: 50px;
    margin-left: 10px;
    margin-top: 20px;
    font-size: 14px;
    padding: 0 10px;
    color: white;
  }

  .tag {
    width: 20px;
    color: #017e66;
    margin-right: 10px;
    display: block;
    line-height: 23px;
    padding: 0 12px;
    background-color: rgba(1, 126, 102, 0.08);
  }

  .profile {
    padding: 1rem;
    background: #eff2f7;
    border-radius: 0.3rem;
  }

  .profile div {
    margin-bottom: 1.5rem;
  }

  .profile div span {
    font-size: 25px;
    color: black;
    margin-left: 1rem;
  }

  .profile p {
    display: flex;
    align-items: center;
    color: grey;
    margin: 0.5rem 0;
  }

  .profile p span {
    margin: 0 0.5rem;
    color: black;
  }

  .profile svg {
    color: black;
    margin-left: 0.2rem;
  }

  .recentTopics img,
  .recentReplies img {
    width: 5rem;
    height: 5rem;
  }

  .recentTopics > p,
  .recentReplies > p {
    margin-bottom: 1rem;
    color: black;
    padding-bottom: 1.5rem;
  }

  .userTitle {
    font-size: 25px;
  }

  .recentTopics {
    padding: 1rem;
    background: #d3dce6;
    border-radius: 0.3rem;
  }

  .recentReplies {
    background: #e5e9f2;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0.3rem;
  }

  .recentReplies div,
  .recentTopics div {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    border-bottom: 2px solid #c0ccda;
    padding-bottom: 1rem;
  }

  .recentTopics div {
    border-bottom: 2px solid #99a9bf;
  }

  .recentReplies div img,
  .recentTopics div img {
    margin-right: 1rem;
  }

  .pagination {
    margin-top: 20px;
  }

  .el-pagination .el-pager .active {

    background-color: #6bd5f1
  }
</style>
